@import '../../../themes/mixins/link';
@import '../../../themes/mixins/error-message';

.dialog {
  max-width: 980px;

  &:focus {
    outline: none;
  }

  > div {
    &::-webkit-scrollbar-thumb {
      background-color: var(--theme-splash-network-scrollbar-thumb-background);

      &:hover {
        background-color: var(
          --theme-splash-network-scrollbar-thumb-background-hover
        );
      }
    }
  }
}

.component {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 50px 80px;

  @media (max-height: 600px) {
    height: initial;
    padding: 0;
  }

  .closeButton {
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    position: fixed;
    right: 15px;
    top: 15px;
    z-index: 10000;

    span {
      height: 44px;
      width: 44px;

      &:hover {
        background-color: var(
          --theme-dialog-set-wallet-password-button-background-color
        );
        border-radius: 50%;
      }
    }

    svg {
      height: 12px;
      margin-top: 16px;
      width: 12px;

      g {
        stroke: var(--theme-wallet-import-description-close-color);
      }
    }
  }

  .content {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-family: var(--font-regular);
    height: 100%;
    justify-content: center;
    left: 0;
    padding: 20px 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2000;

    @media (max-height: 600px) {
      position: initial;
    }

    .title {
      color: var(--theme-wallet-import-title-color);
      font-family: var(--font-regular);
      font-size: 20px;
      line-height: 1.2;
      margin-bottom: 11px;
      text-align: center;
    }

    .description {
      font-family: var(--font-regular);
      font-size: 16px;
      line-height: 1.38;
      margin-bottom: 20px;
      max-width: 580px;

      p {
        color: var(--theme-wallet-import-description-color);
        margin-bottom: 12px;
        text-align: center;

        &:last-child {
          margin-bottom: 0;
        }

        strong {
          color: var(--theme-wallet-import-description-bold-color);
          font-family: var(--font-semibold);
        }
      }
    }

    .radioButtons {
      margin-bottom: 20px;

      :global {
        .RadioSet_label {
          color: var(--theme-wallet-import-stateFolder-label-color);
        }

        .RadioSet_component .RadioSet_radiosContainer > div {
          margin-right: 0;
        }

        .SimpleRadio_label {
          color: var(--theme-wallet-import-description-color);
          font-family: var(--font-regular);
        }

        .SimpleRadio_circle {
          border-color: var(--theme-wallet-import-checkbox-border-color);
        }

        .SimpleRadio_circle.SimpleRadio_selected {
          background-color: var(--theme-wallet-import-checkbox-check-bg-color);

          &:after {
            background-color: var(
              --theme-wallet-import-background-color
            ) !important;
          }
        }
      }
    }

    .stateFolderContainer {
      padding-bottom: 30px;

      .stateFolderLabel {
        color: var(--theme-wallet-import-stateFolder-label-color);
        font-family: var(--font-medium);
        font-size: 16px;
        line-height: 1.38;
        margin-bottom: 11.5px;
        text-align: center;
      }

      .stateFolderInputWrapper {
        align-items: center;
        display: flex;

        .stateFolderInput {
          height: 50px;
          margin-left: 30px;
          width: 540px;

          input {
            background-color: transparent;
            border: solid 1px
              var(--theme-wallet-import-stateFolder-border-color);
            border-radius: 2px;
            color: var(--theme-wallet-import-stateFolder-label-color);
            font-size: 16px;
            line-height: 1.38;
            padding-right: 48px;

            &::-webkit-input-placeholder {
              color: var(--theme-wallet-import-stateFolder-label-color);
              opacity: 0.5;
            }
          }

          &.error {
            input {
              border: solid 1px var(--theme-wallet-import-error-color);
            }
          }
        }
      }

      .noWalletError {
        @include error-message;
        color: var(--theme-wallet-import-error-color) !important;
        max-width: 602px;
        padding-top: 20px;
        text-align: center;
      }
    }

    .action {
      .actionButton {
        background-color: var(--theme-wallet-import-button-background-color);
        border: solid 1px var(--theme-wallet-import-button-border-color);
        color: var(--theme-wallet-import-button-text-color);
        font-weight: 500;
        line-height: 1.36;
        margin: 0 auto;

        &:hover {
          background-color: var(--theme-wallet-import-button-border-color);
          border: none;
          color: var(--theme-wallet-import-button-text-color-hover);
        }

        &.disabled {
          opacity: 0.3;

          :global {
            .LoadingSpinner_component {
              margin-top: 9px;

              .LoadingSpinner_icon svg path {
                fill: var(--theme-wallet-import-button-text-color) !important;
              }
            }
          }

          &:hover {
            background-color: var(
              --theme-wallet-import-button-background-color
            );
            border: solid 1px var(--theme-wallet-import-button-border-color);
            color: var(--theme-wallet-import-button-text-color);
          }
        }
      }
    }

    .learnMoreLink {
      border-bottom: 1px solid var(--theme-splash-network-learn-more-color);
      color: var(--theme-splash-network-learn-more-color);
      margin-top: 20px;
      opacity: 0.8;

      &:after {
        background-color: var(--theme-splash-network-learn-more-color);
      }
    }
  }

  .selectStateDirectoryButton {
    background-color: var(
      --theme-wallet-import-stateFolder-button-background-color
    );
    border-radius: 3px;
    cursor: pointer;
    height: 28px;
    left: -38px;
    position: relative;
    top: -1px;
    width: 28px;

    &:hover {
      background-color: var(
        --theme-wallet-import-stateFolder-button-background-color-hover
      ) !important;
    }

    &:active {
      background-color: var(
        --theme-wallet-import-stateFolder-button-background-color-active
      ) !important;
    }

    .penIcon {
      svg {
        height: 12px;
        position: relative;
        top: 1px;
        width: 12px;

        path {
          stroke: var(--theme-wallet-import-button-text-color);
        }
      }
    }
  }
}
